<template>
  <Modal v-model="messageModal" fullscreen title="消息中心" footer-hide>
    <List item-layout="vertical" size="small">
      <ListItem v-for="(data,index) in messageList" :key="index">
        <ListItemMeta  :title="'交易Hash:'+data.ptransfer_hashID" :description="'用户名称:'+data.pName+'     用户地址:'+data.chairperson" />
        <Progress :percent="data.voteRatio" :stroke-color="['#34adf5', '#87d068']" />
        <template slot="action">
          <li >
            <Tag color="primary"><span @click="voteMessage(data.ptransfer_hashID)">附议</span></Tag>
          </li>
          <li>
            <Tag color="default">详情</Tag>
          </li>
          <li>
            <Tag color="geekblue">
              <span>申请时间:</span>
              <Time :time="data.pData" />
            </Tag>

          </li>
          <li>
            <Tag color="volcano">
              <Icon type="ios-timer-outline" />
              <span>截止时间:</span>
              <Time :time="data.limitTime"  :interval="1" v-if="data.limitTime>=nowTime" style="margin-left: 3px"/>
              <span v-if="data.limitTime<nowTime">时间已截止</span>
            </Tag>

          </li>
        </template>
      </ListItem>
    </List>
  </Modal>
</template>
<script>
import {Message} from "element-ui";

export default {
  data(){
    return{
      messageModal:false,
      nowTime:(new Date()).getTime(),
      messageList:[
        {
          ptransfer_hashID:'0x123123123',
          pName:"SD",
          chairperson:'0x123',
          pData:(new Date()).getTime()-86400 * 3,
          limitTime:(new Date()).getTime()+86400 * 3,
          voteRatio:90
        },
        {
          ptransfer_hashID:'0x123123123',
          pName:"SC",
          chairperson:'0x123',
          pData:(new Date()).getTime()-86400 ,
          limitTime:(new Date()).getTime()+86400 ,
          voteRatio:100
        },
        {
          ptransfer_hashID:'0x123123123',
          pName:"123",
          chairperson:'0x123',
          pData:(new Date()).getTime()-86400 * 2,
          limitTime:(new Date()).getTime()+86400 * 2,
          voteRatio:30
        }
      ]
    }
  },
  mounted() {
    this.watchData()
    this.getMessage()
  },
  watch:{
  },
  methods:{
    watchData() {
      setInterval(() => {
        this.nowTime = (new Date()).getTime()
      }, 1000)
    },
    getMessage() {
      let messageItem=[]
      this.LeagueJS.getProposalsInfo(1,list=>{
        console.log(list)
        list.map((i,j)=>{
          let str={
            ptransfer_hashID:i.ptransfer_hashID,
            pName:i.pName,
            chairperson:i.chairperson,
            pData:parseInt(i.pData),
            limitTime:parseInt(i.limitTime),
            voteRatio:parseInt(i.voteRatio)
          }
          messageItem.push(str)
          j++
        })
        this.messageList = messageItem
      })
    },
    voteMessage(ID){
      this.LeagueJS.voteByMSG(ID,status=>{
        if(status === true){
          this.getMessage()
          Message.success("附议成功")
        }else {
          Message.error("附议失败")
        }
      })
    }
  }
}
</script>
<style scoped lang="less">

</style>
